<app-topbar-nav>
	<div class="pull-right">
		<a class="badge-count color-warning" title="消息"><i class="fa fa-envelope fa-lg" onclick={message.show}></i><span class="badge animated flash infinite" if={message.items.length > 0}>{message.items.length}</span></a>
		<a onclick={logout} title="登出"><i class="fa fa-sign-out fa-lg color-danger"></i></a>
		<div class="message-box" ref="messageBox">
			<div class="message-showall color-gray">
				<a><i class="fa fa-envelope"></i> 查看所有消息</a>
			</div>
			<div class="message-items" ref="messageItems">
				<div class="message-empty color-grayLighter" if={message.items.length <= 0}>暂无消息</div>
				<div class="message-item {item.status||'info'}" each={item in message.items} onclick={message.read}>
					<div class="message-icon">
						<i class="{item.icon || 'fa fa-envelope-o'}"></i>
					</div>
					
					<div class="message-content">
						<div class="message-header ellipsis">
							<span class="message-from">来自: {item.from || '未知'}</span>
							<span class="message-time float-right color-grayLight">{item.time}</span>
						</div>
						<div class="message-body ellipsis">
							{item.text}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		var tag = this;
		tag.on('mount',function(){
			$.parser.parse(tag.root);
			
			$.subscribe('message:update', function(e) {
				tag.message.update();
			});
			setInterval(function(){
				$.publish('message:update');
			}, 10000);
			$(tag.refs.messageItems).niceScroll({
				cursorcolor: "#ccc"
			});
		});
		tag.message = {
			items:[],
			update:function(){
				$.get('/static/json/app.message.box.json', function(data) {
					tag.message.items = data;
					tag.update();
				});
			},
			show:function(e){
				var messageButton = $(e.target),
					messageBox = $(tag.refs.messageBox);
				messageBox.css('left',messageButton.offset().left + messageButton.width() - messageBox.width()).css('top',messageButton.offset().top + messageButton.height() + 10).toggle();
			},
			read:function(e){
				var item = e.item.item;
				console.log(item);
				if(item.action){
					$.publish(item.action);
				}
			}
		}
		
		tag.logout = function(){
			$.publish('app:logout');
		}
	</script>
	<style>
		:scope .pull-right{
			padding: 8px;
		}
		:scope .message-box{
			position: fixed;
			width: 300px;
			display: none;
			border: 1px solid #ededed;
			background-color: #fff;
		}
		:scope .message-items{
			overflow-y: auto;
			max-height: 275px;
		}
		:scope .message-item{
			position: relative;
			border: 1px solid #ededed;
    		border-left: none;
			cursor: pointer;
			margin: 5px 2px;
			height: 40px;
		}
		:scope .message-item:before{
			content: '';
			width: 3px;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		:scope .message-icon{
			position: absolute;
		    width: 20px;
		    bottom: 0;
		    top: 0;
		    left: 3px;
		    text-align: center;
		    line-height: 36px;
		}
		:scope .message-item.info:before{
			background: #03b8cf;
		}
		:scope .message-item.info{
			color: #03b8cf;
		}
		:scope .message-item.success:before{
			background: #38b03f;
		}
		:scope .message-item.success{
			color: #38b03f;
		}
		:scope .message-item.warning:before{
			background: #f1a325;
		}
		:scope .message-item.warning{
			color: #f1a325;
		}
		:scope .message-item.error:before{
			background: #ea644a;
		}
		:scope .message-item.error{
			color: #ea644a;
		}
		:scope .message-content{
			position: absolute;
		    bottom: 0;
		    top: 0;
		    left: 23px;
		    right: 0;
		    padding: 2px;
		}
		:scope .message-showall{
			text-align: center;
			padding-top: 4px;
		}
		:scope .message-empty{
			text-align: center;
			padding: 20px 0;
		}
	</style>
</app-topbar-nav>